<template>
  <div >
    <el-card style="margin-top:1em">
      <el-table
        :data="articles"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="封面"
          width="180">
          <template>
            <el-image>
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="280">
        </el-table-column>
        <el-table-column
          prop="scope"
          label="文章内容"
          width="280">
        <template slot-scope="scope">
          <div v-html="scope.row.content" class="p"></div>
        </template>
        </el-table-column>
        <el-table-column
          prop="scope"
          label="发布时间">
        <template slot-scope="scope">
        <span >{{scope.row.data | formData }}</span>
        </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="Yedit(scope.$index, scope.row)"></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.$index, scope.row)"></el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-star-off"
              circle
              @click="love(scope.$index, scope.row, num=1)"></el-button>
          </template>
        </el-table-column>
      </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  data () {
    return {
      form: {
        num: 1
      },
      articles: [],
      tolcount: 1, // 当前查询能查到的总条数
      curPage: 1, // 表示当前要查询页码
      currentPage: 1
    }
  },
  created () {
    this.loadArticles()
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    loadArticles () {
      this.$http.get('http://localhost:3000/wen').then((response) => {
        this.articles = response.data
        console.log(response.data)
      })
    },
    // 分页
    YpageChange (curPage) {
      this.curPage = curPage
      this.loadArticles()
    },
    Yedit (index, row) {
      console.log(row.id)
      const Info = row
      localStorage.setItem('Info', JSON.stringify(Info))
      this.$router.push({
        path: '/gai',
        query: { Info: Info }
      })
    },
    doDelete (idObj) {
      console.log('你要删除的数据的id是', idObj.toString())
      const id = idObj.toString()
      this.$http.delete(`http://localhost:3000/wen/${id}`).then((response) => {
        console.log(response.data.wen)
        this.loadArticles()
      }).error((err) => {
        console.log(err)
      }
      )
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.$confirm('你真的要删除吗?').then(() => {
        this.doDelete(row.id)
      }).catch(() => {
      })
    },
    love (index, row) {
      console.log(index, row)
      this.$confirm('你确定要加入精选吗?').then(() => {
        const data = {
          title: row.title,
          content: row.content,
          data: row.data
        }
        const assets = JSON.stringify(data)
        this.$http.post('http://localhost:3000/Jing', assets).then(res => {
          console.log('ok', res)
        }).catch(err => {
          console.log(err)
          this.$message.error('加入失败')
        })
      }).catch(() => {
      })
    }
  },
  filters: {
    formData (value) {
      const data = new Date(value)
      const y = data.getFullYear()
      const m = Number(data.getMonth() + 1) < 10 ? '0' + Number(data.getMonth() + 1) : Number(data.getMonth() + 1)
      const d = data.getDate() < 10 ? '0' + data.getDate() : data.getDate()
      const h = data.getHours() < 10 ? '0' + data.getHours() : data.getHours()
      // const s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds()
      const mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes()
      return y + '_' + m + '-' + d + '_' + h + ':' + mm
    }
  }
}
</script>

<style scoped lang='less'>
.filter-card {
  margin-bottom: 30px;
}

.list-table {
  margin-bottom: 20px;
}
.p img {
  width: 100%;
  height: 100%;
}
</style>
